<template>
  <a-modal
    v-model:visible="visible"
    :title="`【${formState.orderNum || ''}】号订单详情`"
    class="custom-class"
    width="90%"
    wrap-class-name="full-modal"
    @ok="handleOk"
    @cancel="close"
  >
    <a-descriptions
      title="订单信息"
      size="small"
      :column="3"
      style="margin-bottom: 20px"
    >
      <a-descriptions-item label="订单号">
        {{ formState.orderCode }}
      </a-descriptions-item>
      <a-descriptions-item label="商品总数">
        {{ formState.totalNum }} 个
      </a-descriptions-item>
      <a-descriptions-item label="订单总额">
        {{ formState.totalAmount }} 元
      </a-descriptions-item>
      <a-descriptions-item label="下单时间">
        {{ formState.orderTime }}
      </a-descriptions-item>
      <a-descriptions-item label="配送方式">
        <a-tag :color="formState.sendmode == 1 ? 'success' : 'blue'">
          {{ formState.sendmode == 1 ? '到店用餐' : '店铺配送' }}
        </a-tag>
      </a-descriptions-item>
      <a-descriptions-item v-if="formState.sendmode == 2" label="配送时间">
        <a-tag :color="formState.sendTime ? 'blue' : 'success'">
          {{ formState.sendTime ? formState.sendTime : '立即配送' }}
        </a-tag>
      </a-descriptions-item>
    </a-descriptions>
    <a-descriptions
      title="用户信息"
      size="small"
      :column="3"
      style="margin-bottom: 20px"
    >
      <a-descriptions-item label="用户名称">
        {{ formState.userName }}
      </a-descriptions-item>
      <a-descriptions-item label="联系方式">
        {{ formState.userMobile }}
      </a-descriptions-item>
      <a-descriptions-item label="用户地址">
        {{ formState.userAddress }}
      </a-descriptions-item>
    </a-descriptions>
    <a-descriptions
      v-if="formState.sendmode == 2"
      title="配送信息"
      size="small"
      :column="3"
      style="margin-bottom: 20px"
    >
      <a-descriptions-item label="骑手名称">
        <ChangeRider v-model:value="formState.riderId" :orderId="formState.id" @change="getOrderInfo" />
      </a-descriptions-item>
      <a-descriptions-item label="联系方式">
        {{ formState.riderMobile }}
      </a-descriptions-item>
    </a-descriptions>
    <a-table
      :columns="columns"
      :dataSource="formState.productList"
      :pagination="false"
    >
    </a-table>
  </a-modal>
</template>
<script setup>
import { add, update, selectById } from '@/api/order'
import { useRouter } from 'vue-router'
import { ref, reactive, onMounted, computed, watch } from 'vue'
import ChangeRider from './ChangeRider'

const columns = [
  {
    title: '商品名称',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '分类',
    dataIndex: 'cateName',
    key: 'cateName',
  },
  {
    title: '数量',
    dataIndex: 'number',
    key: 'number',
  },
  {
    title: '价格',
    dataIndex: 'price',
    key: 'price',
  },
  {
    title: '规格',
    dataIndex: 'size',
    key: 'size',
  },
]

const { push } = useRouter()

const props = defineProps({
  visible: Boolean,
  current: Object,
})
const emit = defineEmits(['update:visible', 'update:current', 'query'])

const formState = ref({
  id: '',
  userName: '',
  userMobile: '',
  status: '0',
  cateId: '',
  cateName: '',
  originalPrice: 0,
  stock: 999,
  price: 0,
  sizeDictValue: '',
  type: '',
  summary: '',
  remark: '',
})

const close = () => {
  emit('update:current', null)
  emit('update:visible', false)
  push('/order/list')
}

const handleOk = (e) => {
  push('/order/list')
  emit('update:current', null)
  emit('update:visible', false)
}
const getOrderInfo = async () => {
  const { data, code } = await selectById({ id: formState.value.id })
  Object.assign(formState.value, data)
}

onMounted(() => {})

watch(
  () => props.current,
  (e) => {
    if (e) {
      Object.assign(formState.value, props.current)
      getOrderInfo()
    } else {
      formState.value = {}
    }
  },
  { deep: true }
)
</script>
<style lang="less" scoped>
:deep(.full-modal) {
  .ant-modal {
    max-width: 90%;
    top: 5%;
    padding-bottom: 0;
    margin: 0;
  }
  .ant-modal-content {
    display: flex;
    flex-direction: column;
    height: calc(100vh);
  }
  .ant-modal-body {
    flex: 1;
  }
}
</style>
